<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    /*
      Promise是JS中进行异步编程的新方案(旧的方案是纯回调)
      Promise不是回调函数，是一个内置的构造函数，是程序自己new调用的
      new Promise的时候要传入一个回调函数(它是同步回调)，它被称为exector函数

      2.具体表达
        1.从语法上来说Promise是一个构造函数
        2.从功能上来说promise对象用来封装一个异步操作并可以获取其结果

    */
   // 创建一个new Promise的实例对象 Promise实例自身自身有3种状态，分别为pending，fulfilled,rejected
   // 每一个promise实例在刚被new出来的那一刻，状态都是初始化
   // exector函数会接收两个参数，它们都是函数，分别用形参：resolve,reject
   /* 
    1.调用resolve，会让Promise实例状态变为fulfilled，同时指定成功的value
    2.调用reject，会让Promise实例状态变为rejected，同时指定成功的reason
   */


   /* 
     基本编码流程
     1.创建Promise实例，传入executor函数
     2.在executor中启动异步任务
     3.根据异步任务的结果，做不同处理
       1.如果成功调用resolve(value)
       2.如果失败调用reject(reason)
    4.通过then方法为promise实例指定成功，失败的回调函数，来获取成功的value,失败的reason
       注意，then方法所指定的成功的回调，失败的回调，都是异步的回调
   */
   const p = new Promise((resolve, reject) => {
    // 会执行setTimeout方法然后放入异步队列，等主线程执行完成再执行里面的方法
    //  setTimeout(() => {
    //   reject(100)
    //  }, 2000);
      const xhr = new XMLHttpRequest()
      // xhr.onreadystatechange属于异步回调函数
      xhr.onreadystatechange = () => {
        if(xhr.readyState == 4) {
          if(xhr.status == 200) {
            resolve(xhr.response)
          }else {
            reject("请求出错")
          }
        }
      }
      // 用什么方式发，往哪里发
      xhr.open('GET','http://www.baidu.com')
      xhr.responseType = 'json'
      xhr.send()


   })
   // 执行then方法，然后等2s以后再执行回调函数， 下面两个p.then不会覆盖而是两次都会调用
   p.then(
    (value) => {console.log(value);},  //成功的回调   异步回调
    (reason) => {console.log(reason);}   // 失败的回调  异步回调
   )
   p.then(
    (value) => {console.log(value);},  //成功的回调   异步回调
    (reason) => {console.log(reason);}   // 失败的回调  异步回调
   )
   console.log(p);
  </script>
</body>
</html>